<template>
	<view class="mainView">
		<view class="info-View">
			<view class="info-View-Left">
				<image :src="wyuserInfo && wyuserInfo.remark1 ? $imagePreview(wyuserInfo.remark1) : '../../static/inavatar.png'" mode=""></image>
			</view>
			<view class="info-View-Right">
				<view class="info-View-Right-List" v-if="wyuserInfo.userName">
					<view class="info-View-Right-List-title">
						姓名
					</view>
					<view class="info-View-Right-List-info">
						{{ wyuserInfo.userName ? wyuserInfo.userName : '' }}
					</view>
				</view>
				
				<view class="info-View-Right-List" v-if="wyuserInfo.sex">
					<view class="info-View-Right-List-title">
						性别
					</view>
					<view class="info-View-Right-List-info">
						{{ wyuserInfo.sex ? wyuserInfo.sex : '' }}
					</view>
				</view>
				
				<view class="info-View-Right-List" v-if="wyuserInfo.birthday">
					<view class="info-View-Right-List-title">
						出生年月
					</view>
					<view class="info-View-Right-List-info">
						{{ wyuserInfo.birthday ? wyuserInfo.birthday : '' }}
					</view>
				</view>
				
				<view class="info-View-Right-List" v-if="wyuserInfo.phoneNumber">
					<view class="info-View-Right-List-title">
						手机号
					</view>
					<view class="info-View-Right-List-info">
						{{ wyuserInfo.phoneNumber ? wyuserInfo.phoneNumber : '' }}
					</view>
				</view>
				
				<view class="info-View-Right-List" v-if="wyuserInfo.position">
					<view class="info-View-Right-List-title">
						所属行业小组
					</view>
					<view class="info-View-Right-List-info">
						{{ wyuserInfo.position ? wyuserInfo.position : '' }}
					</view>
				</view>
				
				
			</view>
		</view>
		
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		
		<view class="qzTitle" v-if="type == '3'">
			{{ reType() }}
		</view>
		
		<view class="qzList" v-if="type == '3'">
			<view class="qzList-Item" v-for="item of 6">
				<view class="qzList-Item-Left">
					<image src="../../../static/img/add_01.png" mode=""></image>
				</view>
				<view class="qzList-Item-Center">
					<view class="qzList-Item-Center-T">
						张胜男<image src="../../static/nv.png" mode=""></image>
					</view>
					<view class="qzList-Item-Center-B">
						<view class="qzList-Item-Center-B-T1">
							职务:
						</view>
						<view class="qzList-Item-Center-B-T2">
							山东木森有限公司董事长
						</view>
					</view>
				</view>
				<view class="qzList-Item-Right">
					<image src="../../static/phone.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="list-box2-List" v-if="type == '1'">
			<view class="list-box2-List-Item" :style="index % 4 !== 0 ? 'margin-left:10rpx' : ''" v-for="(item,index) of userList" :key="index">
				<view class="list-box2-List-Item-Img">
					<image :src="item.remark1 ? $imagePreview(item.remark1) : '../../static/inavatar.png'" mode=""></image>
				</view>
				<view class="list-box2-List-Item-Text">
					{{ item.userName }}
				</view>
				<view class="list-box2-List-Item-Text2">
					<view class="list-box2-List-Item-Text2-View">联系{{ item.sex == '女' ? '她' : '他' }}</view>
				</view>
			</view>
		</view>
		
		<view class="list-box3-List" @tap="getInLX(item)" v-for="(item,index) of infoList" v-if="type == '2'">
			<view class="list-box3-List-Top">
				{{ item.title }}
			</view>
			<view class="list-box3-List-Bottom">
				{{ item.createName }}   {{ item.createTime }}
			</view>
		</view>
		
		
		<view class="add-Btn" @tap="getAddLxqk">
			<image src="@/pagesB/static/tj.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				id:'',
				userId:'',
				userId2:'',
				type:'2',
				wyuserInfo:{},
				userList:[],
				title: '',
				infoList: [],
				getQuery:{
					pageNum:'1',
					pageSize:'10'
				},
				loading: 'loadmore'
			}
		},
		onLoad(e) {
			this.loadLogin()
			
			if(e.type){
				this.type = e.type
			}
			if(e.id){
				this.id = e.id
				
				if(e.userId){
					this.userId2 = e.userId
					this.getDetail()
				}
				
				
			}
			
			
		},
		onShow() {
			this.getDetail()
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onReachBottom() {
			this.getAllDetail()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			getInLX(e){
				uni.navigateTo({
					url:'/pagesA/lxHyxz/detail2?id=' + e.id
				})
			},
			loadLogin() {
				if (this.userInfo.sysUser) {
					this.clientCode = this.userInfo.sysUser.clientCode;
					this.userId = this.userInfo.sysUser.id;
					this.roleCodes = this.userInfo.roleCodes.join(',');
				} else {
					this.$logout(); 
				}
				this.pageNum = 1;
				this.pageSize = 15;
			},
			
			getAddLxqk(){
				let that = this	
				uni.navigateTo({
					url:'/pagesA/lxHyxz/add2?userId=' + that.wyuserInfo.userId + '&contactPeople=' + that.wyuserInfo.userName
				})
			},
			reType(){
				if(this.type == '1'){
					return '请选择联系常委'
				}
				
				if(this.type == '2'){
					return '请选择联系常委'
				}
				
				if(this.type == '3'){
					return ''
				}
			},
			getDetail(){
				let that = this
				this.$request('/minqingzhitong/ms-standing-committee/getRepresentativeDetail', {
					userId:that.userId2,
					pageNum: that.getQuery.pageNum,
					pageSize:that.getQuery.pageSize,
				})
				.then((res) => {
					if(res.code == 200){
						that.wyuserInfo = res.data.userMap		
						that.infoList = res.data.page.records
					}
				});
			},
			getAllDetail(){
				let that = this
				let a = JSON.parse(JSON.stringify(that.getQuery))
				a.pageNum++
				this.$request('/minqingzhitong/ms-standing-committee/getRepresentativeDetail', {
					userId:that.userId2,
					pageNum: a.pageNum,
					pageSize:a.pageSize,
				})
				.then((res) => {
					if(res.code == 200){
						that.wyuserInfo = res.data.userInfo		
						
						if(res.data.page.records && res.data.page.records.length !== 0){
							that.getQuery.pageNum++
							that.infoList.push(res.data.page.records)
						}

					}
				});
			}
		}
	} 
</script>

<style lang="scss" scoped>
.mainView{
	min-height: 100vh;
	background-color: #ffffff;
}

.info-View{
	padding: 20upx 34upx 44upx 34upx;
	display: flex;
	
	.info-View-Left{
		image{
			width: 276upx;
			height: 380upx;
		}
	}
	
	.info-View-Right{
		padding-left: 28upx;
		.info-View-Right-List{
			display: flex;
			align-items: center;
			padding: 13upx 0;
			.info-View-Right-List-title{
				color: #999999;
				font-size: 30upx;
				width: 208upx;
				text-align: left;
			}
			
			.info-View-Right-List-info{
				color: #333333;
				font-size: 30upx;
				
			}
		}
	}
}

.qzTitle{
	padding-left: 28upx;
	height: 100upx;
	line-height: 100upx;
	font-size: 34upx;
	color: #333333;
	font-weight: bold;
	border-bottom: 1upx solid #f6f7f8;
}

.qzList{
	.qzList-Item{
		height: 148upx;
		display: flex;
		align-items: center;
		padding: 0 44upx;
		border-bottom: 1upx solid #f6f7f8;
		.qzList-Item-Left{
			
			display: flex;
			justify-content: center;
			
			image{
				width: 92upx;
				height: 92upx;
				border-radius: 50%;
			}
		}
		.qzList-Item-Center{
			padding-left: 20upx;
			width: 494upx;
			.qzList-Item-Center-T{
				font-size: 34upx;
				color: #333333;
				font-weight: bold;
				display: flex;
				align-items: center;
				image{
					width: 28upx;
					height: 28upx;
					margin-left: 12upx;
				}
			}
			.qzList-Item-Center-B{
				font-size: 24upx;
				display: flex;
				padding-top: 12upx;
				.qzList-Item-Center-B-T1{
					color: #999999;
				}
				
				.qzList-Item-Center-B-T2{
					color: #333333;
				}
			}
		}
		
		.qzList-Item-Right{
			image{
				width: 92upx;
				height: 92upx;
			}
		}
	}
}

.list-box2-List{
		padding: 24upx 36upx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.list-box2-List-Item{
			width: 161upx;
			height: 320upx;
			margin-top: 10upx;
			background-color: #ffffff;
			border: 1upx solid #f6f7f8;
			
			.list-box2-List-Item-Img{
				image{
					width: 161upx;
					height: 188upx;
				}
			}
			
			.list-box2-List-Item-Text{
				text-align: center;
				font-size: 28upx;
				color: #333333;
				line-height: 62upx;
			}
			
			.list-box2-List-Item-Text2{
				
				color: #ffffff;
				font-size: 24upx;
				display: flex;
				justify-content: center;
				text-align: center;
				color: #ffffff;
				
				.list-box2-List-Item-Text2-View{
					width: 132upx;
					height: 48upx;
					line-height: 48upx;
					background-color: #CE2D2C;
					border-radius: 50upx;
				}
			}
		}
	}
	
	
	.list-box3-List{
		height: 140upx;
		padding: 24upx 30upx;
		border-bottom: 1upx solid #f6f7f8;
		.list-box3-List-Top{
			color: #333333;
			font-size: 34upx;
			font-weight: 500;
			overflow: hidden;  //超出隐藏
				white-space: nowrap; //不折行
				text-overflow: ellipsis; //溢出显示省略号
		}
		
		.list-box3-List-Bottom{
			padding-top: 10upx;
			font-size: 26upx;
			color: #666666;
		}
	}
	
	
	.add-Btn{
		position: fixed;
		right: 30upx;
		bottom: 180upx;
		image{
			width: 136upx;
			height: 136upx;
		}
	}
</style>
